

<script lang="ts" setup>
import { ComponentSize } from "element-plus"
import { ref } from "vue"
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    gender: 1
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    gender: 1
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    gender: 2
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    gender: 1
  },
]
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
    const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const dialogTableVisible = ref(false)

const formInline = ref({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

</script>   
<template>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column label="Gender">
      <template #default="scope">
        <el-tag v-if="scope.row.gender === 1">男</el-tag>
        <el-tag v-else>女</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Address" />
  </el-table>
  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-button plain @click="dialogTableVisible = true">
    Open a Table nested Dialog
  </el-button>
  <el-dialog v-model="dialogTableVisible" title="弹出框信息" width="800">
    <el-table :data="tableData">
      <el-table-column property="date" label="日期" width="150" />
      <el-table-column property="name" label="姓名" width="200" />
      <el-table-column property="address" label="地址" />
    </el-table>
  </el-dialog>



  <el-form :inline="true" :model="formInline"  clearable class="demo-form-inline">
    <el-form-item label="审核人">
      <el-input v-model="formInline.user" placeholder="审核人" clearable />
    </el-form-item>
    <el-form-item label="地址">
      <el-select
        v-model="formInline.region"
        placeholder="地址"
        clearable
      >
        <el-option label="上海" value="上海" />
        <el-option label="北京" value="北京" />
      </el-select>
    </el-form-item>
    <el-form-item label="日期">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="出差日期"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Query</el-button>
    </el-form-item>
  </el-form>
  </template>

  
  <style scoped>
  
  </style>